<template>
  <!-- 自定义导航   -->
  <view class="nav-gation">
    <view class="nav-top"></view>
    <text class="nav_height">某某省第一人民医院</text>
  </view>
  <view class="yuyue">
    <image mode="aspectFit" src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/nav-yiyu.png"></image>
  </view>
  <!-- 疫苗预约 -->
  <view class="gongge">
    <view v-for="(item, index) in vaccine" :key="index" @click="vaccineApp(index)">
      <image :src="item.image" mode="aspectFit" />
      <text>{{ item.title }}</text>
    </view>
  </view>

  <!-- 挂号体检 -->
  <view class="re-me-ex">
    <view class="re-me-ex-view" v-for="(item, index) in pyhdata" :key="index">
      <text class="re-me-ex-title">{{ item.title }}</text>
      <text class="re-me-ex-lable">{{ item.describe }}</text>
      <image :src="item.image" mode="widthFix" />
    </view>
  </view>
  <!-- 热门挂号 -->
  <view class="online-title">
    <view>热门挂号</view>
    <view class="online-More">
      <text>查看更多</text>
      <image src="/static/other/gengduo.svg" />
    </view>
  </view>
  <view class="online-reg">
    <view v-for="(item, index) in registered" :key="index" :style="'background-color:' + item.background">
      <text>{{ item.title }}</text>
      <image :src="item.image" mode="aspectFit" />
    </view>
  </view>

  <!-- 健康自测 -->
  <view class="online-title">
    <view>健康自测</view>
  </view>
  <!-- 抑郁症 -->
  <view class="self-test" v-if="selftest.length > 0">
    <view class="sele-test-top sele-test-flex sele-test-one sele-test-back" v-for="(item, index) in [selftest[0]]"
      :key="index">
      <view class="sele-test-view">
        <text class="top-title">{{ item.name }}</text>
        <text class="top-lable">{{ item.describe }}</text>
        <view class="top-people">
          <text class="top-num">{{ item.number_of_people }}</text>
          <text class="top-min top-lable">人测过/{{ item.question }}题/{{ item.minute }}分钟</text>
        </view>
      </view>
      <image class="top-img" :src="item.image" mode="widthFix" />
    </view>

    <!-- 自测男性 失眠程度 -->
    <view class="sele-test-top sele-test-flex sele-test-back" v-for="(item, index) in selftest.slice(1)" :key="index">
      <view class="sele-test-view">
        <text class="top-title">{{ item.name }}</text>
        <text class="top-lable top-min">{{ item.question }} 题 / {{ item.minute }} 分钟</text>
        <view class="top-people">
          <text class="top-num">{{ item.number_of_people }}</text>
          <text class="top-min top-lable"></text>
        </view>
      </view>
      <image class="top-img bottom-img" :src="item.image" mode="widthFix" />
    </view>
  </view>
</template>

<!-- setup:vue3.2语法 lang=ts：使用ts开发逻辑 -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'//引入一个生命周期：当节点加载完成之后会取到
import { RequestApi } from '@/public/request'
import type { Vaccine, Phydata, Registered, Selftest } from '@/public/decl-type'

//取出胶囊按钮的数据
let menu_top = ref<string>('')
let menu_height = ref<string>('')

//等节点加载完毕之后回来执行它
onMounted(() => {
  //微信小程序头部的胶囊
  //断言 as {key:value , key2:value2} 在.的话就能够有提示了
  // let MenuButton = uni.getStorageSync('MenuButton') as {top:number,height:number}
  // console.log(MenuButton)
  // menu_top.value = MenuButton.top + 'px'
  // menu_height.value = MenuButton.height + 'px'
  pageDaract()

})

// 网络请求中最常用类型声明，请求到的数据是类似于数组字符串，数组对象这种类型便可以声明    卸载public下的.d.ts文件（类型声明文件）里

//首页第一项数据：疫苗预约
let vaccine = ref<Vaccine[]>([])//数组对象，声明的是一个vaccine对象数组存储
//首页第二项：疫苗预约
let pyhdata = ref<Phydata[]>([]) //ref声明变量，赋值时肯定是.value  1， ？？？
//首页第三项  热门挂号
let registered = ref<Registered[]>([])
// 首页第四项数据：健康自测
let selftest = ref<Selftest[]>([])


//请求数据
//1,传统写法
async function pageDaract() {
  const res = await RequestApi.FrontPage()
  console.log(res.statusCode)
  console.log("----------测试----->"+res.data.data[0].vaccine[0].title)

  vaccine.value = res.data.data[0].vaccine
  pyhdata.value = res.data.data[1].reserve
  registered.value = res.data.data[2].popular
  selftest.value = res.data.data[3].self_test

  console.log(res)
}
//2,箭头函数
let pageDarajt = () => {

}
// 表单提交
function vaccineApp(index:number){
  switch(index){
    case 0:
      uni.navigateTo({url:"/pages/xinguan-vaccine/xinguan-vaccine"})
      break;
    case 1:
      uni.navigateTo({url:"/pages/hpv-vaccine/hpv-vaccine"})
      break;
    case 2:
      uni.navigateTo({url:"/pages/nucleic-acid/index"})
      break;
    case 3:
      uni.navigateTo({url:"/pages/graphics/index"})
  }
}

</script>

<style>
.nav-gation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.nav-top {
  height: v-bind('menu_top');
}

.nav-height {
  height: v-bind('menu_height');
  line-height: v-bind('menu_height');
  padding-left: 20rpx;
  color: #fff;
  font-weight: bold;
  font-size: 35rpx;
}

.yuyue image {
  width: 100%;
  display: block;
  height: 550rpx;
}

.gongge {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 30rpx;
}

.gongge image {
  width: 50rpx;
  height: 50rpx;
  display: block;
  padding-bottom: 20rpx;
}

.gongge view {
  /* width: calc(20% - 10rpx*2); */
  /* margin: 10rpx; */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
}

.re-me-ex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx;
}

.re-me-ex-view {
  position: relative;
  height: 200rpx;
  width: 48%;
}

.re-me-ex-view image {
  width: 150rpx;
  display: block;
  position: absolute;
  bottom: 0;
  right: 20rpx;
}

.re-me-ex view:nth-child(1) text:nth-child(1) {
  color: #0042ff;
}

.re-me-ex view:nth-child(2) text:nth-child(1) {
  color: #dc6200;
}

.re-me-ex view:nth-child(1) {
  background-image: linear-gradient(to right, #d7dfff 10%, #5a9fff 100%);
  border-radius: 20rpx;
}

.re-me-ex view:nth-child(2) {
  background-image: linear-gradient(to right, #ffdbb4 10%, #ffc56b 100%);
  border-radius: 20rpx;
}

.re-me-ex-title {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  font-size: 40rpx;
}

.re-me-ex-lable {
  font-size: 30rpx;
  color: #ffffff;
  position: absolute;
  top: 90rpx;
  left: 20rpx;
}

/* 在线挂号 */
.online-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 10rpx 10rpx 10rpx;
  font-weight: bold;
}

.online-title view:nth-child(1) {
  font-size: 35rpx;
}

.online-More {
  display: flex;
  align-items: center;
}

.online-More image {
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin-left: 10rpx;
}

.online-reg {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 10rpx 0;
}

.online-reg image {
  width: 50rpx;
  height: 70rpx;
}

.online-reg view {
  width: calc(33% - 30rpx*2);
  margin: 10rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  justify-content: space-between;
  border-radius: 10rpx;
}

/* 健康自测 */
.self-test {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sele-test-top {
  display: flex;
  justify-content: space-between;
}

.sele-test-flex {
  width: calc(50% - 10rpx*2);
  margin: 10rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  height: 250rpx;
}

.sele-test-one {
  width: 100%;
}

.sele-test-back {
  background-color: #ffffff;
  box-shadow: #f7f7f7 0px 0px 20rpx 10rpx;
}

.top-lable {
  color: #a6abb0;
}

.top-img {
  width: 250rpx;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
}

.bottom-img {
  width: 170rpx !important;
}

.self-test text {
  display: block;
}

.sele-test-view {
  position: absolute;
  left: 20rpx;
  top: 35rpx;
}

.top-people {
  display: flex;
  align-items: baseline;
  padding-top: 30rpx;
}

.top-title {
  padding-bottom: 10rpx;
  font-size: 35rpx;
}

.top-num {
  font-size: 35rpx;
  padding-right: 10rpx;
}

.top-min {
  font-size: 25rpx;
}
</style>
